<template>
    <div class="page-container">
        <TableHead
            :config="tableHeaderConfig"
            :searchdata.sync="filters"
            v-show="showSearch"
            @parentPageList="findPageList"
        ></TableHead>
        <!--表格内容栏-->
        <el-card class="card-box">
            <table-tool-bar :showSearch.sync="showSearch" @queryTable="findPageList" :columns="columns">
                <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleAdd">新增</el-button>
            </table-tool-bar>
            <Table
                v-model="filters.pageNum"
                :columns="columns"
                :data="tableList"
                :total="total"
                :loading="loading"
                showNo
                @getPageList="findPageList"
            >
                <template slot="isDurable" slot-scope="{ scope }">
                    <el-tag v-if="scope.row.isDurable == 0" size="small" type="danger">否</el-tag>
                    <el-tag v-if="scope.row.isDurable == 1" size="small" type="success">是</el-tag>
                </template>
                <template slot="isNonconcurrent" slot-scope="{ scope }">
                    <el-tag v-if="scope.row.isNonconcurrent == 0" size="small" type="danger">否</el-tag>
                    <el-tag v-if="scope.row.isNonconcurrent == 1" size="small" type="success">是</el-tag>
                </template>
                <template slot="requestsRecovery" slot-scope="{ scope }">
                    <el-tag v-if="scope.row.requestsRecovery == 0" size="small" type="danger">否</el-tag>
                    <el-tag v-if="scope.row.requestsRecovery == 1" size="small" type="success">是</el-tag>
                </template>
                <template slot="oper" slot-scope="{ scope }">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">
                        编辑
                    </el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">
                        删除
                    </el-button>
                </template>
            </Table>
        </el-card>
        <!--新增与编辑的弹窗-->
        <EditItem
            v-model="dialogVisible"
            :data-form="dataForm"
            :dialog-config="dialogConfig"
            :data-form-rules="dataFormRules"
            :dialog-tag="dialogTag"
            :title="title"
            width="600px"
            @submitForm="submitForm"
        ></EditItem>
    </div>
</template>

<script>
import TableHead from '@/components/TableHeadSearch'
import TableToolBar from '@/components/TableToolBar'
import EditItem from '@/components/EditItem'
import { getJobsList, addJob, editJob, deleteJob } from '@/api/task/index'

import { confirm } from '@/utils/utils'

export default {
    name: 'jobs',
    components: {
        TableHead,
        EditItem,
        TableToolBar
    },
    data() {
        return {
            title: '新增任务',
            showSearch: true,
            // 表格要查询的字段配置
            filters: {
                jobGroup: '',
                jobName: '',
                pageNum: 1,
                pageSize: 10
            },
            loading: false,
            // 表格搜索处的字段
            tableHeaderConfig: [
                { title: '任务名称', code: 'jobName', type: 'input' },
                { title: '任务组', code: 'jobGroup', type: 'input' }
            ],
            // 列表的列的展示字段
            columns: [
                { prop: 'jobName', label: '任务名称', visible: true, key: 'jobName' },
                { prop: 'jobGroup', label: '任务分组', visible: true, key: 'jobGroup' },
                { prop: 'jobClassName', label: '任务对象', visible: true, key: 'jobClassName' },
                { slot: 'isDurable', label: '持久化', visible: true, key: 'isDurable' },
                { slot: 'requestsRecovery', label: 'Recoverable', visible: true, key: 'requestsRecovery' },

                { slot: 'isNonconcurrent', label: '串行执行', visible: true, key: 'isNonconcurrent' },
                {
                    prop: 'description',
                    label: '描述',
                    width: 200,
                    showOverflowTooltip: true,
                    visible: true,
                    key: 'description'
                },
                {
                    slot: 'oper',
                    label: '操作',
                    align: 'center',
                    minWidth: 120,
                    fixed: 'right',
                    visible: true,
                    key: 'oper'
                }
            ],
            // 接口返回data
            tableList: [],
            total: 0,
            // 新增编辑界面是否显示
            dialogVisible: false,
            // 规则
            dataFormRules: {
                jobName: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
                jobGroup: [{ required: true, message: '请输入任务分组', trigger: 'blur' }],
                jobClassName: [{ required: true, message: '请输入任务对象', trigger: 'blur' }]
            },
            // 新增编辑界面数据
            dataFormDefault: {
                jobName: '',
                jobGroup: '',
                jobClassName: '',
                // requestsRecovery: 0,
                description: ''
            },
            dataForm: {},
            // dialog 要渲染的数据json
            dialogConfig: [
                { title: '任务名称', code: 'jobName', type: 'input', maxlength: 50, disabled: 'edit' },
                { title: '任务分组', code: 'jobGroup', type: 'input', maxlength: 20, disabled: 'edit' },
                { title: '任务对象', code: 'jobClassName', type: 'input', maxlength: 300 },
                // { title: 'recoverable', code: 'requestsRecovery', type: 'radio' },
                {
                    title: '描述',
                    code: 'description',
                    type: 'textarea',
                    maxlength: 20
                }
            ],
            dialogTag: '' // 编辑与新样的标识
        }
    },
    mounted() {},
    created() {
        this.findPageList()
    },
    methods: {
        // 获取分页数据
        findPageList() {
            this.loading = true
            getJobsList(this.filters)
                .then((res) => {
                    this.tableList = res.data.items
                    this.total = res.data.total
                })
                .finally(() => {
                    this.loading = false
                })
        },
        // 删除
        handleDelete(row) {
            confirm('确定要删除吗?').then(() => {
                deleteJob({ jobGroup: row.jobGroup, jobName: row.jobName }).then((res) => {
                    this.$message.success('删除成功')
                    this.findPageList()
                })
            })
        },
        // 显示新增界面
        handleAdd() {
            this.dialogVisible = true
            this.dataForm = Object.assign({}, this.dataFormDefault)
            this.dialogTag = 'add'
        },
        // 显示编辑界面
        handleEdit(params) {
            this.title = '编辑任务'
            this.dialogVisible = true
            this.dataForm = Object.assign({}, params)
            this.dialogTag = 'edit'
        },
        // 编辑与新增 提交 请求接口
        submitForm(data) {
            let fetchApi = this.dialogTag === 'add' ? addJob : editJob
            fetchApi(data).then((res) => {
                this.$message.success(res.msg)
                this.findPageList()
                this.dataForm = Object.assign({}, this.dataFormDefault)
                this.dialogVisible = false
            })
        }
    }
}
</script>
<style scoped></style>
